<template>
    <view class="content">
		<StatusBar />
        <view class="header bg-color">
            <image :src="`${baseURL}/${configs.logo_img}`"></image>
        </view>
        <view style="font-size: 22px;text-align: center;font-weight: 550;margin-top: 10px;">{{configs.name}}</view>

        <view class="list">
			
            <view class="list-call">
                <text class="myicon icon-dianhua"></text>
                <input class="sl-input" v-model="form.tel" type="number" maxlength="11" placeholder="输入手机号"/>
            </view>
            <view class="list-call" v-if="form.login_type==1">
				<text class="myicon icon-zhuanjifenshimingrenzheng"></text>
                <input class="sl-input" v-model="form.password" type="text" maxlength="32" placeholder="输入密码" password="true"/>
            </view>
            <view class="list-call" v-if="form.login_type==2">
                <text class="myicon icon-zhuanjifenshimingrenzheng"></text>
                <input class="sl-input" v-model="form.code" type="text" maxlength="32" placeholder="输入验证码"/>
                <view class="bg-color" @click="sendsms" style="padding: 5px 15px;color: #ffffff;border-radius: 10px;">发送验证码</view>
            </view>
        </view>

        <view class="button-login bg-color" hover-class="button-hover" @click="bindLogin">
            登录
        </view>

        <view class="agreenment text-color">
            <div @click="form.login_type=2" v-if="form.login_type==1">验证码登录</div>
            <div @click="form.login_type=1" v-if="form.login_type==2">密码登录</div>
            <div style="margin: 0 4px;">|</div>
            <navigator url="forget" open-type="navigate">忘记密码</navigator>
        </view>
    </view>
</template>

<script>
export default { 
    data() {
        return {
		    baseURL:this.baseURL,
		    configs:uni.getStorageSync('configs'),
			form:{
				login_type: 1,//1密码，2验证码
				tel: '17096709660',
				password: '123456',
				code: '',
				username: '',
			}
        };
    },
	onLoad() {
	},
    methods: {
        sendsms() {
            if (this.form.tel.length != 11) {
                this.error('手机号不正确')
                return;
            }
			this.get('index/sendsms',{type:'login_code',tel:this.form.tel,}).then(({code})=>{
				if(code===1){
					this.success('发送验证码成功！')
				}
			})
        },
        bindLogin() {
            if (this.form.tel.length != 11) {
				this.error('手机号不正确');return;
            }
            if (this.form.login_type == 1 && this.form.password.length < 6) {
				this.error('密码不正确'); return;
            }
            if (this.form.login_type == 2 && !this.form.code.length) {
				this.error('请输入验证码');return;
            }
            uni.getLocation({
                type: 'wgs84',
                success:  (res) =>{
                  console.log('getLocation-res:',res)
				  this.get('login/tel_login',{
                            login_type: this.form.login_type,
                            tel: this.form.tel,
                            code: this.form.code,
                            password: this.form.password,
                            username: this.form.username,
                            latitude: res.latitude,
                            longitude: res.longitude,
                        }).then(({code,token,user_id})=>{
				  	if(code===1){
				  		uni.setStorageSync('token', token)
				  		uni.setStorageSync('user_id', user_id)
						this.success('登录成功')
						this.redirect('/pages/index/home',1200)
				  	}
				  })
                },
                fail:  (res) =>{
				    console.error(res)
                    this.error('请允许使用您的位置')
                },
				complete:  (res) =>{
				    console.log('complete',res)
                },
            })
        }
    }
}
</script>

<style>
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header {
    width: 88px;
    height: 88px;
    box-shadow: 0px 12px 13px 0px $base-color;
    border-radius: 50%;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.header image {
   max-height: 100%;
    border-radius: 50%;
}

.list {
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    padding-left: 70px;
    padding-right: 70px;
}

.list-call {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    color: #333333;
    border-bottom: 0.5px solid #e2e2e2;
}

.list-call .img {
    width: 18px;
    height: 18px;
}


.list-call .sl-input {
    flex: 1;
    text-align: left;
    font-size: 16px;
    margin-left: 16px;
}

.button-login {
    color: #FFFFFF;
    font-size: 20px;
    width: 200px;
    height: 50px;
    box-shadow: 0px 0px 13px 0px rgba(164, 217, 228, 0.2);
    border-radius: 50px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
	line-height: 50px;
}

.agreenment {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-top: 80px;
    text-align: center;
    height: 40px;
    line-height: 40px;
}


</style>
